BBEdit HTML Tools v2

Using the Tools


The tools have been designed to be used in a number of ways, depending upon your preference.

Menu:

All the tools are accessible from the extensions menu. Some tools require that you have a selection before they become available for selection, and will remain greyed-out if no selection or valid editing window is open.

Keyboard:

BBEdit allows you to specify keyboard shortcuts for any extension. BBEdit 3.5.2 now allows the Control-key to be used in these shortcuts, avoiding conflicts with BBEdit's standard shortcuts.

Palette:

Perhaps the easiest and most direct way to access the tools is through the HTML Tools Palette. This gives you access to the most commonly used tools.

The palette has a simple button-type interface. Some tools have a popup menu that allows you direct access to certain options. For example, the Heading tool allows you to directly select the heading level you wish to use.

Additionally, the palette supports drag and drop editing, so certain tools will accept text or files dragged onto them, and will respond appropriately. For example, dragging some text onto th Anchor tool will turn that text into an Anchor. Dragging a file onto the Anchor tool will create a link to that file in the current editing window.

Certain buttons can also be dragged into your document, eg Dragging the Table button will allow you to insert a table element into your document.

Most of the buttons also allow you to use the Command and Option keys to modify their behaviour. Typically Option-clicking a button will bring up the options for the tool, while Command-clicking will invoke the tool with the options last used (ie bypassing an dialg box that might normally appear).

Balloon Help

Almost all the the tools that present a dialog have balloon help for all the items. It is worth checking the various options in a given tool at least once to see if there is any information that isn't necessarily obvious.

Dialog Shortcuts

Within the dialogs, most items have keyboard shortcuts. Holding the Command-key down for a second or two will display the keyboard shortcuts, in much the same way as they do in BBEdit's dialogs.

And Introducing... The Tools:

Below is a list of the tools in this package. Most of the functionality is self-evident, and the balloon help covers most things. For this reason, only a brief overview of the tool and details of non-obvious functionality is documented.

Anchor

Addressing

There are three modes of address; Full, Root and Relative. Which mode you use depends on a number of factors, and it is really up to your own personal preference and any constraints imposed by your server. Examples of addressing:
Full
http://www.heron.no/well/index.html
Root
/well/index.html
Relative
..index.html

File Popup

The file popup (next to the file button) gives you quick access to different sorts of information. Clicking on it with no modifier keys will give you a list of the last 10 URLs that you used. Option-clicking will give you a list of the named anchors in your document. Control-clicking gives you a list of files in the last directory accessed from the file button. This latter function can be a real time-saver.

Breaks

Covers the range of break-related markup (Horizontal Rule, Line Break, Paragraph Breaks) and the respective attributes (plus the two Netscapisms 'NoBreak' and 'WordBreak'.

Custom Markup

This allows you to extend the tools by adding in new tags, and creating simple macros. This is discussed in more depth in the file 'Custom Markup Info.txt'

Document

Colour

Gives you an easy way of setting the colour attributes of your document. It provides you with a preview area so that you don't have to keep previewing with a browser. To change a particular element (eg the body text), click on it in the preview area, and then the colour you wish it to be. To change a colour, double click on a colour chip.

Div

Standard HTML-3 DIV tags.

MetaTags

Contains a list of the metatags used by the update tool for easy insertion into your document.

Update

Updates the current document, or your entire web. See 'Template.html' for more information about this.

Font

Contains all you need to set your font attributes.

Small Caps

A little tool to give you easy Small Caps using FONT tags.

Form

Contains most of the functionality you need to put together a form.

Heading

Nothing amazing here, just the standard heading attributes.

Image


See the Anchor tool for details of the addressing methods and using the File popup menu.

This tool will automatically handle the size attribute for GIF, JPEG and PNG files. If you wish to use the LOWSRC attribute, select your principle (full) image file. The tool will check to see if a file exists in the same directory with the same filename + _Low, and add in the LOWSRC attribute. eg:

      main image file:      ball.gif
      LOWSRC version:       ball_Low.gif

Lists


If you select some text, the the List tool will assume that you want to convert that text into a List. You will be asked to specify list type and attributes, and then the selection will be marked up on the basis that each line is a list item.

Preview

The preview tool allows you to select your html document using the applciation of your choice. Your document must be saved before you can preview it, and you will be prompted to save it if required.

Tip: Constantly being asked if you want to save a document, though polite, can become annoying. You can turn off this behaviour by clicking on the Preview palette button holding down the Control + Option + Command keys. This toggles a preference setting that control whether you are asked if you want to save the document or not.


Style


Table

One of the more recent tools, this allows you to add in the standard TABLE tags. Additionally, you can convert existing comma- or tab-delimited data into a table.

Tabulate

There are occasions when you can't use the standard TABLE constructs, and this tool allows you to create tables using monospaced fonts - so they are ideal for using within <PRE>...</PRE> tags.

Utilities

Balance Tags

Some structures can become difficult to work with as they become more complex, eg nested lists, tables etc. Using the Balance Tags tool works in much the same way as the equivalent 'Balance' command familiar to all programmers. If the insertion point is within a container, Balance Tags will select the contents of that container. Selecting Balance Tags once again will select the contents of the container that contains the previous container (Try it, it's much easier to see what it does). If the tool cannot locate a valid container, then you will hear a beep.

Use this tool if you find that the Check HTML flags an error, and you are having trouble locating the cause of it. Check your containers to see if they are valid, and if you hear a beep then it suggests that you have an error somewhere.

(Note that because of the inconsistent use of the <P> tag, <P> is NOT treated as a container).

Check Links

This will examine your current document and report any errors found. Use this tool often to ensure that your document is as correct as it can be. Be aware that when checking a document, errors early in a document can give rise to additional errors further on in the document, so it is generally a good idea to fix errors as they are reported.

Check Markup

As the name suggests, this will check your document's local links, and report back on any errors discovered. This does not currently check URL's beyond the scope of your server (ie links to pages on other servers).

Document Size

If you have constraints on the size of your document (eg if you are placing it on a server with a slow connection), you will want to keep an eye on the document size. This tool gives you details of how large the document is, taking into account the text and image requirements for the document. It also gives you an indication of the percentage of text and image within the document.

Entities

A simple tool that allows you to select and insert entities into your document. (A prime candidate for re-writing).

Index Document

Another simple tool that will go through a document, and index all the headings that it contains. If a heading is unanchored, then it will create an anchor within the heading, eg:

<H4><A NAME="Index Document">Index Document</A></H4>

(If you are indexing an existing document, then ensure that the anchors are within the Heading tags, rather than outside.)

Insert Hotlist

Simply allows you to select a hotlist (or if you were brought up with Netscape, a bookmark file) and insert the contents into your document as either a series of links, or in a readable text form.

Remove All Comments

Will scour your document for comments and remove them.

Remove Tags

Removes all tags from your document.

Tags->Lower Case and Tags->Upper Case

If you are working on someone else's document, or you have a preference for lower-case tags, then you can use these tools to set the tags to the case of your choice.

Translate

Has a range of settings to assist you with translation files to and from html.

Comment

Will make an HTML comment from your current selection. If the selection contains any tags, then these will be formatted so that older browsers won't hiccup on them.

Uncomment

The counterpart to the Comment tool, will reverse any commenting done within the selection.

Miscellaneous

A few simple tools created using the Custom Markup tool

Center

A very simply example of using the Custom Markup to provide you with a CENTER tool.

PageMill Cleaner

Currently, PageMill has a few quirks, and this tool simply cleans a PageMill document up.

Side Quote

A bit of flash. Make sure that any text you select is effectively 'wrapped' to a narrow column width using
s, and this will look quite nice indeed. If no text is selected, you will be asked to enter some.